<template>
  <div class="register-container">
    <el-card :body-style="{ padding: '0' }" class="register-box">
      <div class="register-header">
        <!-- Logo 区域 -->
        <div class="logo-wrapper">
          <div class="logo-placeholder">

          </div>
        </div>
        <h1 class="title">游云智管</h1>
      </div>
      <el-card :body-style="{ padding: '30px' }">
        <!-- 表单区域 -->
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="form-wrapper" lang="en-hans">
          <!-- 用户名输入框 -->
          <el-form-item prop="username">
            <el-input
              v-model="registerForm.username"
              lang="en-hans"
              placeholder="请输入账号">
              <template #prefix>
                <svg-icon class="icon" icon-class="user"/>
              </template>
            </el-input>
          </el-form-item>

          <!-- 密码输入框 -->
          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              lang="en-hans"
              placeholder="请输入密码"
              show-password>
              <template #prefix>
                <svg-icon class="icon" icon-class="password"/>
              </template>
            </el-input>
          </el-form-item>

          <!-- 邮箱输入框 -->
          <el-form-item prop="email">
            <el-input
              v-model="registerForm.email"
              lang="en-hans"
              placeholder="输入邮箱">
              <template #prefix>
                <svg-icon class="icon" icon-class="email"/>
              </template>
            </el-input>
          </el-form-item>

          <!-- 验证码 -->
          <el-form-item prop="code">
            <el-row>
              <el-col :span="16">
                <el-input
                  v-model="registerForm.code"
                  lang="en-hans"
                  placeholder="请输入验证码">
                  <template #prefix>
                    <svg-icon class="icon" icon-class="security"/>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-button
                  :disabled="isCounting"
                  :loading="emailLoading"
                  class="code-button"
                  type="text"
                  @click="sendEmailCode(registerForm.email)">
                  {{ countdownText }}
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>

          <!-- 注册按钮 -->
          <el-button
            :loading="loading"
            class="register-btn"
            lang="en-hans"
            round
            type="primary"
            @click="handleRegister">
            {{ loading ? '注册中...' : '注 册' }}
          </el-button>

          <!-- 登录链接 -->
          <div class="login-link-wrapper">
            <router-link to="/login">使用已有账户登录</router-link>
          </div>
        </el-form>
      </el-card>

    </el-card>

    <!-- 底部 -->
    <div class="footer">
      <span>备案号---</span>
    </div>
  </div>
</template>

<script>
import {getCodeImg, getEmailCode, register} from "@/api/login";
import Template from "@/views/game/template/index.vue";

export default {
  name: "Register",
  components: {Template},
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: "",
        email: "",
        uuid: ""
      },
      registerRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
          {min: 2, max: 20, message: "用户密码长度必须介于 2 和 20 之间", trigger: "blur"},
          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        email: [
          {required: true, trigger: "blur", message: "请输入邮箱"},
          {min: 6, max: 64, message: "邮箱长度必须介于 6 和 64 之间", trigger: "blur"},
          {
            required: true,
            pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "邮箱格式不正确",
            trigger: "blur"
          }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      emailLoading: false,
      captchaEnabled: true,
      countdown: 60,
      isCounting: false,
      countdownText: '获取验证码',
      passwordVisible: false
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    // 获取验证码
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.registerForm.uuid = res.uuid;
        }
      });
    },

    // 发送邮箱验证码
    sendEmailCode(email) {
      if (this.isCounting) return;
      this.emailLoading = true;
      getEmailCode({email: email}).then(res => {
        this.$message({message: "验证码发送成功", type: "success"});
        this.emailLoading = false;
        this.startCountdown();
      }).catch(() => {
        this.emailLoading = false;
      });
    },

    // 启动倒计时
    startCountdown() {
      this.isCounting = true;
      this.countdown = 60;
      const timer = setInterval(() => {
        this.countdown--;
        this.countdownText = this.countdown + " s";
        if (this.countdown <= 0) {
          clearInterval(timer);
          this.countdownText = '重新发送';
          this.isCounting = false;
        }
      }, 1000);
    },

    // 处理注册
    handleRegister() {
      // 表单验证
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          register(this.registerForm).then(res => {
            const username = this.registerForm.username;
            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.push("/login");
            }).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          })
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.register-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

/* 登录框头部 */
.register-header {
  padding: 30px 0 10px 0;
  text-align: center;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

.register-box {
  width: 360px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95);
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.logo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.icon {
  font-size: 16px;
  color: #0078D4;
  font-weight: bold;
}

.title {
  margin: 0 0 25px;
  text-align: center;
  color: #FFF;
  font-size: 24px;
  font-weight: 500;
}

.form-wrapper {
  margin-bottom: 0;

  ::v-deep .el-form-item {
    margin-bottom: 20px;

  }

  ::v-deep .el-input__inner {
    height: 35px;
    border: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 1px solid #dcdfe6;
    border-radius: 0;
    background: transparent;
    padding-left: 30px;

    &:focus {
      border-bottom-color: #409EFF;
    }
  }

  ::v-deep .el-input__prefix {
    left: 0;
  }
}

.code-button {
  text-align: center;
  width: 100%;
  margin-left: 10px;
  height: 35px;
  font-size: 14px;
  font-weight: bold;
}

/* 登录按钮 */
.register-btn {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  height: 35px;
  width: 100%;
  border-radius: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
}

.register-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 117, 252, 0.4);
}

.register-btn:active {
  transform: translateY(1px);
}

.login-link-wrapper {
  text-align: center;

  a {
    color: #409EFF;
    text-decoration: none;
    font-size: 14px;

    &:hover {
      text-decoration: underline;
    }
  }
}

.footer {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}
</style>
